import { useWorkFlowStore } from '@/store/workflowStore'
import cn from '@/util/classnames'
import { RiCloseLine } from '@remixicon/react'
import './style.less'

const BottomPanel = ({ left = true, right = true, changePanelStatus = (status: boolean) => {} }: any) => {
  const { errorInfo } = useWorkFlowStore()
  const leftOffset = left ? 216 : 8
  const rightOffset = right ? 508 : 8
  const offsetWidth = leftOffset + rightOffset

  return (
    <div
      className={cn('fixed bottom-0 z-[1500] h-[240px]', 'shadow-lg transition-all')}
      style={{
        width: `calc(100% - ${offsetWidth}px)`,
        left: `${leftOffset}px`,
        right: `${rightOffset}px`
      }}
    >
      <div
        className={cn('h-[100%] w-[100%] rounded-2xl  bg-[#ffffff] transition-all', 'rounded-[8px] border-transparent')}
      >
        <div className="sticky top-0 z-10 cursor-move border-b-[0.5px] border-black/5">
          <div className="flex h-[48px] items-center justify-between p-[16px] pb-1 pt-1">
            <div className="leading-0">错误列表</div>
            <div
              className="flex shrink-0 items-center justify-end text-gray-500"
              style={{
                width: '148px'
              }}
            >
              {/* <div className="mx-3 h-3.5 w-[1px] bg-[#eaecf0]" /> */}
              <div className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5">
                <RiCloseLine
                  className="text-text-tertiary h-4 w-4"
                  onClick={() => {
                    changePanelStatus(false)
                  }}
                />
              </div>
            </div>
          </div>
        </div>
        <div className="h-[180px]  overflow-y-auto px-[16px] pt-[8px]">
          {
            errorInfo.split('[@split@]').map((item: string, index: number) => {
              return <div key={index} className="text-[#ff441e]">{item}</div>
            })
          }
        </div>
      </div>
    </div>
  )
}

export default BottomPanel
